<template>
	<view>
		<view>
			<view class="head">
				<view class="box_flex flex-c">
					<image :src="userInfo.face"></image>
					<view class="right">
						<view class="name">
							{{ userInfo.name }}
							<text v-if="userInfo.idcard && userInfo.idcard!='null'">@{{ userInfo.idcard }}</text>
						</view>
						<view class="tel">{{ userInfo.phone }}</view>
					</view>
				</view>
				<view class="idCard">会员卡号：{{ userInfo.card }}</view>
				<view class="money">
					充值余额：
					<text>¥{{ userInfo.money }}</text>
				</view>
				<view class="money">
					赠送余额：
					<text>¥{{ userInfo.givePrice }}</text>
				</view>
			</view>
			<view class="bt">余额变动记录</view>
			<view class="tabLeft flex">
				<view :class="dateType==index?'li on':'li'" v-for="item,index in tabList" :key="index" @click="tabChange(index)">{{ item }}</view>
			</view>
			<view class="card">
				<view v-for="item,index in list" :key="index" class="li flex-cb">
					<view class="flex-1">
						<view class="title f30 c2">
							<text>{{ item.title }}</text>
						</view>
						<view class="date f26 c6 mt10">
							<text></text>
							{{ item.createTime }}
						</view>
						<view class="details f26 c9 mt10" v-if="item.info">
							<text>{{ item.info }}</text>
						</view>
					</view>
					<view class="price">{{ item.refund == 0 ? '-' : '+' }}{{ item.money }}</view>
				</view>
			</view>
			<u-loadmore v-if="!is && list.length >= 10" status="nomore" line />
			<view class="no-list" v-if="!list || list.length == 0">
				<image src="@/static/images/default_empty.png"></image>
				<view>暂无记录</view>
			</view>
			<view style="height: 30rpx;"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 0, //页码
			is: true, //控制是否还能切换下一页
			list: [],
			memberId: '',
			userInfo: {},
			dateType: 0,
			tabList: ['全部', '收入', '支出']
		};
	},
	onLoad(options) {
		console.log('options',options);
		this.memberId = options.id
		this.userInfo = {
				name: options.name,
				card: options.card,
				idcard: options.idcard,
				givePrice: options.givePrice,
				phone: options.phone,
				money: options.money,
				face: options.face
			}
		this.getList();
	},
	methods: {
		tabChange: function(index) {
			this.dateType = index
			this.is = true
			this.page = 0
			this.list = []
			this.getList();
		},
		// 列表
		getList() {
			if (!this.is) return
			this.page = this.page + 1
			this.$app.ajax({
				data: {
					pagination: {
						page: this.page,
						rows: 10
					},
					param: {
						venueId: uni.getStorageSync('GYMID'),
						type: this.dateType == 0 ? '' : this.dateType == 1 ? '0' : '1',
						memberId: this.memberId
					}
				},
				api: this.$api.memberMR()
			}).then(res => {
				if (res.errorCode != '000000') return
				if (res.recordList.length < 10 || !res.recordList) {
					this.is = false
				}
				this.totalCount = res.totalCount;
				let arr = res.recordList
				let arrs = []
				if (arr) {
					arrs = this.list.concat(arr)
				} else {
					arrs = []
				}
				this.list = arrs
			});
		},
		getDate() {
			this.$app.ajax({
				data: {
					param: {
						memberId: this.data.memberId
					}
				},
				api: this.$api.memberInfo()
			}).then(res => {
				if (res.errorCode != '000000') return;
				this.setData({
					userInfo: res.record
				});
			});
		},
		onReachBottom() {
			this.getList();
		},
	}
};
</script>

<style>
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
.tabLeft {
	width: 690rpx;
	margin: 36rpx auto 0;
}
.tabLeft view {
	width: 100rpx;
	height: 60rpx;
	background: #ffffff;
	border-radius: 36rpx;
	font-size: 26rpx;
	margin-right: 20rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	line-height: 60rpx;
	text-align: center;
}

.tabLeft view.on {
	background: #4167c1;
	color: #fff;
}
.head {
	box-sizing: border-box;
	padding: 30rpx;
	background-color: #fff;
}

.box_flex image {
	width: 72rpx;
	height: 72rpx;
	margin-right: 30rpx;
	border-radius: 50%;
}

.right {
	flex: 1;
}

.name {
	font-weight: 500;
	color: #222222;
	font-size: 30rpx;
	line-height: 1.5;
	margin-bottom: 10rpx;
}

.name text {
	font-weight: 400;
	color: #4167c1;
	font-size: 22rpx;
	margin-left: 20rpx;
}

.tel {
	color: #999999;
	line-height: 1.5;
	font-size: 24rpx;
}

.idCard {
	color: #333333;
	font-size: 26rpx;
	margin-top: 10rpx;
	line-height: 1.5;
}

.money {
	color: #333333;
	font-size: 26rpx;
	margin-top: 10rpx;
	line-height: 1.5;
}

.money text {
	font-size: 26rpx;
	color: #dd5040;
}

.bt {
	font-weight: 500;
	color: #222222;
	font-size: 32rpx;
	line-height: 1.5;
	margin-top: 30rpx;
	padding-left: 30rpx;
}
.card {
	box-sizing: border-box;
	padding: 0 30rpx;
	background-color: #fff;
	margin: 30rpx auto 0;
	width: 690rpx;
}
.card .li {
	padding: 30rpx 0;
}
.card .li .price {
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	flex: none;
}
</style>
